<template>
  <div class="core-business">
    <div class="core-business-title">核心业务</div>
    <div class="core-business-table">
      <div
        class="core-business-item"
        ref="businessItem"
        @click="businessSelect(index)"
        v-for="(item, index) in coreBusinessList"
        :key="index"
      >
        {{ item.title }}
      </div>
    </div>
    <div
      class="core-business-content"
      @mouseover="overHover()"
      @mouseout="outHover()"
    >
      <div class="core-business-content-left">
        <div class="core-business-content-left-title" ref="contentTitleRef">
          {{ businessTitle }}
        </div>
        <div class="core-business-content-left-type" ref="contentTypeRef">
          {{ businessType }}
        </div>
        <div class="core-business-content-left-txt">
          {{ businessTxt }}
        </div>
        <div class="core-business-content-left-btn">了解更多 ></div>
      </div>
      <div
        class="core-business-content-right"
        :style="bgStyle(businessImgurl)"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { bgStyle } from "../../utils/common.js";
const coreBusinessList = ref([
  {
    title: "乐游潮玩",
    type: "新型线上娃娃机加盟项目",
    imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/corebusines2-2.png",
    txt: "在潮玩魔盒系统成功的基础上，整合多方资源，对传统线上娃娃机的运营模式进行简化升级，提供场地设备、技术开发及售后、运营指导等多项支持，有效降低创业投入成本，为有投资意向的创业者提供放心加盟新选择——一个人也能轻松完成创业！",
  },
  {
    title: "奈飞快车",
    type: "国际流媒体账号合租平台",
    imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/corebusines4-2.png",
    txt: "通过奈飞快车平台您能十分便捷的订阅Netflix高级会员，Youtube家庭组会员，Spotify会员等多种国际流媒体会员账号，并轻松管理续费。奈飞快车是一个安全的，便捷的，省心的账号合租平台，4K画质、海量电影、热门剧集，让您畅享私人影院级体验！",
  },
  {
    title: "纷享易SAAS系统",
    type: "助力传统商家线上转型增收",
    imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/corebusines5-2.png",
    txt: "纷享易SAAS系统于2019年6月正式上线，致力于帮助传统商家完成线上转型。目前纷享易已有注册店铺 3万+ ，会员 500万+ 。纷享易用户平均括客增长 150% ，营收增长 135% 。",
  },
  {
    title: "猎鱼客",
    type: "帮客户精准锁定目标，一站式服务",
    imgUrl:
      "https://cdn.leweisoft.com/mh/website/lewei/corebusines-lieyuke.png",
    txt: "猎鱼客凭借先进的算法和海量数据，实现与潜在客户的精准匹配，告别低效推广，节省大量时间和成本。我们采用自动化操作，根据智能决策分析结果，为您量身定制专属营销方案，引导用户主动找到您，真正实现轻松获客——猎鱼客能够成为您的得力助手，轻松实现创业目标 。",
  },
]);
const businessTitle = ref("");
const businessType = ref("");
const businessTxt = ref("");
const businessImgurl = ref("");
const businessItem = ref();
const contentTitleRef = ref();
const contentTypeRef = ref();
onMounted(() => {
  businessSelect(0);
});
function businessSelect(index) {
  businessTitle.value = coreBusinessList.value[index].title;
  businessType.value = coreBusinessList.value[index].type;
  businessTxt.value = coreBusinessList.value[index].txt;
  businessImgurl.value = coreBusinessList.value[index].imgUrl;
  businessItem.value.forEach((item, i) => {
    if (i == index) {
      item.style.borderBottom = "#497bff 3px solid";
      item.style.color = "#4986ff";
    } else {
      item.style.borderBottom = "none";
      item.style.color = "#595d6e";
    }
  });
}
function overHover() {
  contentTitleRef.value.style.color = "#4986ff";
  contentTypeRef.value.style.color = "#4986ff";
}
function outHover() {
  contentTitleRef.value.style.color = "#000";
  contentTypeRef.value.style.color = "#000";
}
</script>
<style scoped lang="less">
.core-business {
  margin-top: 5.168vw;
  .core-business-title {
    font-size: 2.067vw;
    font-weight: 700;
    text-align: center;
  }
  .core-business-table {
    width: 99vw;
    margin-top: 4.134vw;
    padding: 0 19.742vw 5.633vw;
    display: flex;
    justify-content: space-between;
    .core-business-item {
      color: #595d6e;
      cursor: pointer;
      font-size: 1.034vw;
      padding-bottom: 1.55vw;
    }
  }
  .core-business-content {
    display: flex;
    justify-content: space-between;
    margin: 0 19.742vw 0;
    .core-business-content-left {
      cursor: pointer;
      .core-business-content-left-title {
        font-size: 1.654vw;
        font-weight: 700;
      }
      .core-business-content-left-type {
        font-size: 1.034vw;
        padding: 0.207vw 0 1.55vw 0;
      }

      .core-business-content-left-txt {
        width: 26.873vw;
      }
      .core-business-content-left-txt {
        padding-top: 1.55vw;
        font-size: 0.724vw;
      }
      .core-business-content-left-btn {
        width: 6.615vw;
        height: 1.654vw;
        font-size: 0.724vw;
        background-color: #4986ff;
        border-radius: 0.207vw;
        text-align: center;
        line-height: 1.654vw;
        margin-top: 2.584vw;
        color: #fff;
      }
    }

    .core-business-content-right {
      width: 30.646vw;
      height: 18.76vw;
    }
  }
}
</style>
